<template>
  <view class="container">
    <view class="van_top">
      <van-nav-bar title="我的收货地址" fixed left-arrow @click-left="onClickLeft" />
    </view>
    <view class="content">
      <view class="safe-area" :style="{ height: (statusBarHeight + 46) + 'px' }" style="width: 100%;"></view>
      <view class="address_list" v-if="addressList.length > 0">
        <scroll-view enhanced scroll-y="true" :show-scrollbar="false" class="scroll-Y" style="height: 100%;"
          :refresher-triggered="triggered" refresher-enabled @refresherrefresh="refresherrefreshFn">
          <view class="address_item" v-for="(item, index) in addressList" :key="index">
            <view class="address_info">
              <view class="address_address">{{ item.region }} {{ item.address }} <text class="moren"
                  v-if="item.isDefault == '0'">默认</text>
              </view>
              <view class="address_name">{{ item.receiverName }}</view>
              <view class="address_phone">{{ item.receiverPhone }}</view>
            </view>
            <view class="address_edit" @click="goEdit(item.id)">
              <van-icon name="edit" size="20" />
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="address_add_box" v-if="addressList.length > 0">
        <view class="address_add" @click="goAdd">
          <van-icon name="plus" size="20" />
          <text>新增收货地址</text>
        </view>
      </view>
      <view class="noAddress" v-if="addressList.length === 0">
        <view style="margin-bottom: 48rpx;">暂无收货地址</view>
        <button class="submit-btn" type="info" @click="goAdd">
          去新增收货地址<van-icon name="arrow" />
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import app from '@/App.vue'
import { reqAddressList } from '@/apis/user'
export default {
  data() {
    return {
      radio: '',
      statusBarHeight: app.globalData.statusBarHeight,
      // addressList: [{
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '1 先生',
      //   phone: '177****5641',
      //   id: '1',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '2 先生',
      //   phone: '177****5641',
      //   id: '2',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '3',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '4',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '5',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '6',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '7',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '8',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '9',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '10',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼307',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '11',
      //   isCheck: false
      // },
      // {
      //   address: '金科·智慧谷-1号科研楼 3楼30712',
      //   name: '李** 先生',
      //   phone: '177****5641',
      //   id: '12',
      //   isCheck: false
      // },
      // ]
      addressList: [],
      triggered: false
    }
  },
  onLoad() {

  },
  onShow() {
    this.getList()
  },
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    onChange(e) {
      console.log('e', e);
    },
    async getList() {
      const res = await reqAddressList()
      if (res.code === 200) {
        console.log('res', res.data);
        this.triggered = false
        this.addressList = res.data
      }
    },
    goAdd() {
      uni.navigateTo({
        url: '/packageA/pages/addAddress/addAddress'
      })
    },
    goEdit(id) {
      uni.navigateTo({
        url: '/packageA/pages/editAddress/editAddress?id=' + id
      })
    },
    refresherrefreshFn() {
      this.triggered = true
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.content {
  box-sizing: border-box;
  padding: 0 24rpx;
  height: 100vh;
  // margin-bottom: 100rpx;

  .address_list {
    height: calc(100% - 130rpx);
    background-color: #fff;
    padding-bottom: 200rpx;
    box-sizing: border-box;

    .address_item {
      min-height: 146rpx;
      padding: 24rpx;
      width: 100%;
      border-bottom: 1px solid #EEEEEE;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .address_check {
        width: 10%;
        text-align: center;
        padding-left: 5%;
      }

      .address_edit {
        width: 10%;
      }

      .address_info {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        margin-right: 24rpx;

        .address_address {
          width: 100%;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 38rpx;
          text-align: left;
          margin-bottom: 24rpx;

          .moren {
            width: 76rpx;
            height: 36rpx;
            line-height: 36rpx;
            text-align: center;
            border-radius: 6rpx 6rpx 6rpx 6rpx;
            border: 2rpx solid #FF1642;
            font-weight: 400;
            font-size: 24rpx;
            color: #FF1642;
            margin-left: 24rpx;
            display: inline-block;
            // padding: 4rpx;
          }
        }

        .address_name {
          width: 40%;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 28rpx;
          text-align: left;
          // margin-right: 96rpx;
        }

        .address_phone {
          width: 50%;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 28rpx;
          text-align: left;
        }
      }

    }
  }

  .address_add_box {

    position: fixed;
    bottom: 0;
    left: 0;
    height: 110rpx;
    width: 100%;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    padding-left: 24rpx;
    padding-bottom: 20rpx;

    .address_add {
      width: 702rpx;
      height: 76rpx;
      background: #FF1642;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      line-height: 76rpx;
      text-align: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }
}

.noAddress {
  padding-top: 216rpx;
  font-weight: 600;
  font-size: 40rpx;
  color: #333333;
  text-align: center;

  .submit-btn {
    width: 478rpx;
    height: 76rpx;
    background: #FF1642;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 76rpx;
    letter-spacing: 2rpx;
  }
}
</style>